<template>
  <el-dropdown
    @command="handleCommand"
    size="medium"
    placement="bottom"
    v-if="dropdown"
  >
    <div class="icon-more"></div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-if="detail" command="detail" v-auth="detailAuth">
        <div class="dropdown-item-box">
          <div class="home-icon icon-detail"></div>
          详情
        </div>
      </el-dropdown-item>
      <el-dropdown-item v-if="edit" command="edit" v-auth="editAuth">
        <div class="dropdown-item-box">
          <div class="home-icon icon-edit"></div>
          编辑
        </div>
      </el-dropdown-item>
      <el-dropdown-item v-if="del" command="delete" v-auth="deleteAuth">
        <div class="dropdown-item-box">
          <div class="home-icon icon-delete"></div>
          删除
        </div>
      </el-dropdown-item>
      <slot name="slot"></slot>
    </el-dropdown-menu>
  </el-dropdown>
  <div class="more-btn-box" v-else>
    <el-button
      type="primary"
      round
      size="small"
      @click="$emit('detail')"
      icon="el-icon-tickets"
      v-auth="detailAuth"
      v-if="detail"
    >
      详情</el-button
    >
    <el-button
      plain
      round
      size="small"
      @click="$emit('edit')"
      icon="el-icon-edit"
      v-auth="editAuth"
      v-if="edit"
    >
      编辑</el-button
    >
    <el-button
      type="danger"
      round
      size="small"
      @click="$emit('delete')"
      icon="el-icon-delete"
      v-auth="deleteAuth"
      v-if="del"
    >
      删除</el-button
    >
    <slot name="slot"></slot>
  </div>
</template>
<script>
export default {
  props: {
    edit: {
      type: Boolean,
      default() {
        return true
      }
    },
    del: {
      type: Boolean,
      default() {
        return true
      }
    },
    detail: {
      type: Boolean,
      default() {
        return true
      }
    },
    dropdown: {
      type: Boolean,
      default() {
        return true
      }
    },
    detailAuth: {
      type: [String, Boolean],
      default() {
        return true
      }
    },
    editAuth: {
      type: [String, Boolean],
      default() {
        return true
      }
    },
    deleteAuth: {
      type: [String, Boolean],
      default() {
        return true
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case 'detail':
          this.$emit('detail')
          break
        case 'edit':
          this.$emit('edit')
          break
        case 'delete':
          this.$emit('delete')
          break
        default:
          this.$emit('slotClick', command)
      }
    }
  }
}
</script>
<style lang="less">
.dropdown-item-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  min-width: 70px;
}

.icon-more {
  width: 44px;
  height: 24px;
  cursor: pointer;
  background: url('~assets/icon/icon_more.png');
  background-size: 44px 24px;

  &:hover {
    background: url('~assets/icon/icon_more_current.png');
    background-size: 44px 24px;
  }
}

.home-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.icon-detail {
  background: url('~assets/icon/icon_detail.png') no-repeat;
  background-size: 18px 20px;
}

.icon-edit {
  background: url('~assets/icon/icon_edit.png') no-repeat;
  background-size: 18px 20px;
}

.icon-delete {
  background: url('~assets/icon/icon_delete.png') no-repeat;
  background-size: 18px 20px;
}

.icon-repair {
  background: url('~assets/icon/icon_repair.png') no-repeat;
  background-size: 20px 20px;
}

.icon-retry {
  background: url('~assets/icon/icon_retry.png') no-repeat;
  background-size: 20px 20px;
}

.icon-start {
  background: url('~assets/icon/icon_start.png') no-repeat;
  background-size: 20px 20px;
}

.icon-end {
  background: url('~assets/icon/icon_end.png') no-repeat;
  background-size: 20px 20px;
}
</style>
